<template>
  <Layout>
    <div style="min-height: 600px" v-loading="loading">
      <el-card shadow="never" style="min-height: 400px">
        <div slot="header">
          <el-row>
            <el-col :span="12">
              <span>{{ blog.files ? Object.keys(blog.files)[0] : "" }}</span>
            </el-col>
            <el-col :span="12">
              <div style="text-align: right">
                <el-button
                  @click="share"
                  style="padding: 3px 0"
                  type="text"
                  icon="el-icon-share"
                  >分享</el-button
                >
                <el-button
                  @click="edit"
                  style="padding: 3px 0"
                  type="text"
                  icon="el-icon-edit"
                  v-if="token"
                  >编辑</el-button
                >
                <el-button
                  style="padding: 3px 0"
                  type="text"
                  icon="el-icon-more-outline"
                  @click="more"
                  >更多博客</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="font-size: 0.9rem; line-height: 1.5; color: #606c71">
          发布 {{ blog.created_at }}
          <br />
          更新 {{ blog.updated_at }}
        </div>
        <div
          style="
            font-size: 1.1rem;
            line-height: 1.5;
            color: #303133;
            border-bottom: 1px solid #e4e7ed;
            padding: 5px 0px 5px 0px;
          "
        >
          <pre style="font-family: '微软雅黑'">{{ blog.description }}</pre>
        </div>
        <div
          v-html="blog_content"
          class="markdown-body"
          style="padding-top: 20px"
        ></div>
      </el-card>
    </div>
  </Layout>
</template>

<page-query>
query($id: ID) {
  gists(id: $id) {
    id
  }
}
</page-query>

<script>
import gistApi from "../../api/gist";

export default {
  data() {
    return {
      token: null,
      loading: true,
      blog: {},
      blog_content: null,
    };
  },
  async mounted() {
    let { data } = await gistApi.single(this.$page.gists.id);
    data.created_at = this.$util.utcToLocal(data.created_at);
    data.updated_at = this.$util.utcToLocal(data.updated_at);
    this.blog = data;
    this.loading = false;
    this.blog_content = this.$markdown(
      this.blog.files[Object.keys(this.blog.files)[0]].content
    );
  },
  methods: {
    edit() {
      if (!this.token) {
        this.$message({
          message: "请绑定有效的Token",
          type: "warning",
        });
        return;
      }
      this.$router.push("/user/blog/edit/" + this.blog.id);
    },
    more() {
      this.$router.push("/blog");
    },
    share(url) {
      this.$util.copy(this.blog.html_url);
      this.$message({
        message: "链接已复制,去分享给好友吧!!",
        type: "success",
      });
    },
  },
};
</script>